<template>
	<div class="app">
		<h1>我是App组件</h1>
		<button @click="showXuexiao">输出一下App组件的$refs.xuexiao</button>
		<School ref="xuexiao"/>
		<br>
		<Student/>
		<br>
		<Welcome/>
	</div>
</template>

<script>
	//引入Student组件
	import Student from './components/Student'
	//引入School组件
	import School from './components/School'
	//引入Welcome组件
	import Welcome from './components/Welcome'

	export default {
		name:'App',
		components:{School,Student,Welcome},
		methods: {
			showXuexiao(){
				console.log(this.$refs.xuexiao)//输出的是ref所在组件的实例对象（School组件的vc）
			}
		},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 30px;
	}
	h2{
		background-color: yellowgreen;
	}
</style>